<template>
  <div>
    <t-table :table-data="tableData" :table-columns="tableColumns" border stripe :height="300">
      <template #name="{ row,$index }">
        <div>{{ row.name }}-{{ $index }}</div>
      </template>
    </t-table>
  </div>
</template>
<script setup>
const tableColumns = [
  {
    key: 'id',
    label: 'id',
    width: "150",
    fixed: "left",
  },
  {
    key: 'name',
    label: 'Name',
    width: "150",
    align: 'center',
  },
  {
    key: 'age',
    width: "150",
    label: 'age',
  },
  {
    key: 'email',
    width: "850",
    label: 'email'
  },
  {
    key: 'city',
    width: "850",
    label: 'city'
  },
  {
    key: 'score',
    width: "150",
    label: 'score'
  },
  {
    key: 'isActive',
    width: "150",
    label: 'isActive',
  },
  {
    key: 'joinDate',
    width: "150",
    label: 'joinDate',
    fixed: "right",
  },
]

const tableData = [
  {
    "id": 101,
    "name": "Alice",
    "age": 28,
    "email": "alice@example.com",
    "city": "New York",
    "score": 85.5,
    "isActive": true,
    "joinDate": "2022-03-15"
  },
  {
    "id": 102,
    "name": "Bob",
    "age": 34,
    "email": "bob@example.com",
    "city": "London",
    "score": 72.0,
    "isActive": false,
    "joinDate": "2021-07-22"
  },
  {
    "id": 103,
    "name": "Charlie",
    "age": 22,
    "email": "charlie@example.com",
    "city": "Tokyo",
    "score": 91.3,
    "isActive": true,
    "joinDate": "2023-01-10"
  },
  {
    "id": 104,
    "name": "Diana",
    "age": 45,
    "email": "diana@example.com",
    "city": "Berlin",
    "score": 68.7,
    "isActive": true,
    "joinDate": "2020-11-05"
  },
  {
    "id": 105,
    "name": "Ethan",
    "age": 31,
    "email": "ethan@example.com",
    "city": "Paris",
    "score": 77.9,
    "isActive": false,
    "joinDate": "2022-09-18"
  },
  {
    "id": 106,
    "name": "Fiona",
    "age": 26,
    "email": "fiona@example.com",
    "city": "Sydney",
    "score": 94.2,
    "isActive": true,
    "joinDate": "2023-04-30"
  },
  {
    "id": 107,
    "name": "George",
    "age": 39,
    "email": "george@example.com",
    "city": "Toronto",
    "score": 63.4,
    "isActive": true,
    "joinDate": "2021-12-12"
  },
  {
    "id": 108,
    "name": "Hannah",
    "age": 29,
    "email": "hannah@example.com",
    "city": "Seoul",
    "score": 88.1,
    "isActive": false,
    "joinDate": "2022-05-25"
  },
  {
    "id": 109,
    "name": "Ian",
    "age": 33,
    "email": "ian@example.com",
    "city": "Moscow",
    "score": 75.6,
    "isActive": true,
    "joinDate": "2020-08-14"
  },
  {
    "id": 110,
    "name": "Julia",
    "age": 27,
    "email": "julia@example.com",
    "city": "Dubai",
    "score": 82.3,
    "isActive": true,
    "joinDate": "2023-02-28"
  },
  {
    "id": 111,
    "name": "Kevin",
    "age": 41,
    "email": "kevin@example.com",
    "city": "Singapore",
    "score": 69.8,
    "isActive": false,
    "joinDate": "2021-04-17"
  },
  {
    "id": 112,
    "name": "Lily",
    "age": 24,
    "email": "lily@example.com",
    "city": "Hong Kong",
    "score": 95.0,
    "isActive": true,
    "joinDate": "2023-06-09"
  },
  {
    "id": 113,
    "name": "Mike",
    "age": 36,
    "email": "mike@example.com",
    "city": "Shanghai",
    "score": 71.2,
    "isActive": true,
    "joinDate": "2022-08-03"
  },
  {
    "id": 114,
    "name": "Nancy",
    "age": 30,
    "email": "nancy@example.com",
    "city": "Chicago",
    "score": 84.7,
    "isActive": false,
    "joinDate": "2021-10-21"
  },
  {
    "id": 115,
    "name": "Oscar",
    "age": 48,
    "email": "oscar@example.com",
    "city": "Los Angeles",
    "score": 66.5,
    "isActive": true,
    "joinDate": "2020-05-30"
  },
  {
    "id": 116,
    "name": "Paul",
    "age": 25,
    "email": "paul@example.com",
    "city": "Mumbai",
    "score": 90.1,
    "isActive": true,
    "joinDate": "2023-05-12"
  },
  {
    "id": 117,
    "name": "Queen",
    "age": 32,
    "email": "queen@example.com",
    "city": "Bangkok",
    "score": 73.9,
    "isActive": false,
    "joinDate": "2022-01-07"
  },
  {
    "id": 118,
    "name": "Ryan",
    "age": 37,
    "email": "ryan@example.com",
    "city": "Sydney",
    "score": 79.4,
    "isActive": true,
    "joinDate": "2021-09-14"
  },
  {
    "id": 119,
    "name": "Sarah",
    "age": 23,
    "email": "sarah@example.com",
    "city": "Berlin",
    "score": 92.8,
    "isActive": true,
    "joinDate": "2023-03-22"
  },
  {
    "id": 120,
    "name": "Tom",
    "age": 42,
    "email": "tom@example.com",
    "city": "Tokyo",
    "score": 64.3,
    "isActive": false,
    "joinDate": "2020-12-19"
  }
]
</script>